<template>
	<div class="multicolorLabelConfig">
		<div class="multicolorLabelConfig-head">
			<div style="flex: 1.5">{{i18n("minValue","最小值")}}</div>
			<div>{{i18n("maxValue","最大值")}}</div>
			<div>{{i18n("label","标签名")}}</div>
			<div>{{i18n("color","颜色")}}</div>
		</div>
		<div class="multicolorLabelConfig-list">
			<div class="multicolorLabelConfig-common" v-for="(colors,index) in colors" :key="index">
				<div class="multicolorLabelConfig-common-le">
                    <MinusCircleOutlined  v-if="index>1" @click="deleteColor(index)"/>
					<a-input-number style="width: 70px" :class="[index>1?'':'multicolorLabelConfig-number']" v-model:value="colors.min"/>
				</div>
				<div>
					<a-input-number class="multicolorLabelConfig-input"  v-model:value="colors.max"/>
				</div>
				<div>
					<a-input class="multicolorLabelConfig-input" v-model:value="colors.label"/>
				</div>
				<div>
					<a-input class="multicolorLabelConfig-input" v-model:value="colors.color"  type="color"/>
				</div>
			</div>
		</div>
		<div class="addColor" @click="addColor"><PlusCircleOutlined class="addColor-icon"  /><div>{{i18n("newColor","新增颜色")}}</div></div>
	</div>
</template>

<script>
export default {
	name: "VisualMapPiecewise",
	props:['colors'],
	data(){
		return{}
	},
	mounted() {
	},
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"dialogLang.visualMapLang",key);
		},
		deleteColor(index){
			this.colors.splice(index,1);
		},
		addColor(){
			this.colors.push({
				min:0,
				max:30,
				label:"",
				color:'#4285f4'
			})
		}
	}
}
</script>

<style scoped>
.multicolorLabelConfig-number{
	margin-left: 38px;
}
.multicolorLabelConfig-input{
	width: 90%;
	margin: auto
}
.multicolorLabelConfig{
	margin-right: 10px;
	margin-top: 10px;
}
.multicolorLabelConfig-head{
	display: flex;
	height: 40px;
	border: 1px solid #d9d9d9;
	border-right: none;
	border-radius: 5px 5px 0px 0px;
}
.multicolorLabelConfig-head>div{
	flex: 1;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-right: 1px solid #d9d9d9;
}
.multicolorLabelConfig-list{
	border: 1px solid #d9d9d9;
	border-top: none;
	border-bottom: none;
}
.multicolorLabelConfig-common{
	display: flex;
	height: 40px;
	width: 100%;
	border-bottom: 1px solid #d9d9d9;
}
.multicolorLabelConfig-common >div{
	height: 40px;
	flex: 1;
	display: flex;
	align-items: center;
	border-right: 1px solid #d9d9d9;
}
.multicolorLabelConfig-common >div:nth-child(4){
	border-right:none;
}
.multicolorLabelConfig-common-le{
	flex: 1.5!important;
}
.multicolorLabelConfig-common-le span{
	margin-left: 10px;
	font-size: 18px;
	margin-right: 10px;
	cursor: pointer;
}
.multicolorLabelConfig-common-le span:hover{
	color: #4285f4;
}
.addColor{
	display: flex;
	align-items: center;
	width: 100%;
	text-align: center;
	border: 1px solid #d9d9d9;
	height: 35px;
	line-height: 35px;
	color: #4285f4;
	font-size: 14px;
	margin-bottom: 15px;
	border-top: none;
	text-align: center;
	margin-bottom: 10px;
	cursor: pointer;
}
.addColor-icon{
	margin-right: 5px;
	font-size: 18px;
	margin-left: 140px;
}
</style>
